<template>
    <div>
        <section class="header text-center">
            <nav class="navbar navbar-expand-lg navbar-light navbar-custom">
                <div class="container"><a class="navbar-brand" href="/"><i class="fas fa-shopping-bag primary-color mr-1"></i>{{$t('m.name')}}</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                    <div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
                        <ul class="navbar-nav mt-2 mt-md-0">
                            <li class="nav-item active"><a class="nav-link" href="#">{{$t('m.Home')}} <span class="sr-only">(current)</span></a></li>
                            <li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.Shop')}} </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <div class="container">
                                        <div class="divider"></div>
                                        <div class="row">
                                            <div class="col-md-2">
                                                <h6 class="text-uppercase">Women's</h6>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-md-2">
                                                <h6 class="text-uppercase">Men's</h6>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-md-2">
                                                <h6 class="text-uppercase">Girl's</h6>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-md-2">
                                                <h6 class="text-uppercase">Boy's</h6>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-md-4">
                                                <h6 class="text-uppercase">Featured Items</h6>
                                                <div class="row">
                                                    <div class="col-6 text-center"><a href="item.html">
                                                        <img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
                                                        <h6 class="mb-0"><a href="item.html">Product Name</a></h6>
                                                        <p><span class="emphasis">$49.00</span></p>
                                                        <a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
                                            </div>
                                                    <div class="col-6 text-center"><a href="item.html">
                                                        <img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
                                                        <h6 class="mb-0"><a href="item.html">Product Name</a></h6>
                                                        <p><span class="emphasis">$49.00</span></p>
                                                        <a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
                                            </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.Pages')}} </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">{{$t('m.HomePages')}}</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="catalog.html">{{$t('m.Catalog')}}</a>
                                    <a class="dropdown-item" href="item.html">{{$t('m.Item_Detail')}}</a>
                                    <a class="dropdown-item" href="cart.html">{{$t('m.Cart')}}</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="contact.html">{{$t('m.Contact')}}</a>
                                </div>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="contact.html">{{$t('m.Contact')}}</a></li>
                        <li class="nav-item dropdown"><input type="text" /></li>
                            <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-shopping-cart"></i> <span class="badge badge-pill badge-primary">3</span></a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
                                    <h6>3 Items <span class="emphasis">$147.00</span></h6>
                                    <div class="dropdown-divider"></div>
                                    <ul class="shopping-cart-items">
                                        <li class="row">
                                            <div class="col-3">
                                                <img src="images/placeholder-product.jpg" width="60">
                                            </div>
                                            <div class="col-9">
                                                <h6><a href="item.html">Product Name</a></h6>
                                                <span class="text-muted">1x</span>
                                                <span class="emphasis">$49.00</span></div>
                                        </li>
                                        <li class="row">
                                            <div class="col-3">
                                                <img src="images/placeholder-product.jpg" width="60">
                                            </div>
                                            <div class="col-9">
                                                <h6><a href="item.html">Product Name</a></h6>
                                                <span class="text-muted">1x</span>
                                                <span class="emphasis">$49.00</span></div>
                                        </li>
                                        <li class="row">
                                            <div class="col-3">
                                                <img src="images/placeholder-product.jpg" width="60">
                                            </div>
                                            <div class="col-9">
                                                <h6><a href="item.html">Product Name</a></h6>
                                                <span class="text-muted">1x</span>
                                                <span class="emphasis">$49.00</span></div>
                                        </li>
                                    </ul>
                                    
                                    <a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a></div>
                            </li>
                        </ul>
                        <span v-if="!username">
                            <!-- 此处做一个分支判断是否登录 -->
                        <a href="http://localhost:8080/login/">登录</a>
                        &nbsp;|&nbsp;
                        <a href="http://localhost:8080/register/">注册</a>
                        </span>
                        <span v-if="username">
                            欢迎您：<em><a href="/myprofile">{{username}}</a></em>&nbsp;|&nbsp;
                            <a href="javascript:;" @click="loginout">退出</a>
                        </span>
                    </div>
                </div>
                <div>
                    <div>切换语言
                            <Select v-model="select" :datas="lang_list" :filterable="true" width='30'  @change="changeLangEvent(select)"></Select>
                    </div>
                    
                </div>
            </nav>
        </section>
    </div>
</template>


<script>
export default {
    name:'myheader',
    data() {
        return {
            username:'',
            lang_list:[{ title: '中文', key: 'cn'}, { title: '英文', key: 'en' }, { title: '法文', key: 'fr' }],
            select:{ title: '中文', key: 'cn'},
        }
    },
    mounted() {
        //钉钉登录
        var ding_id = this.$route.query.ding_id;
        var uid = this.$route.query.uid;
        var jwt = this.$route.query.jwt;

        if (ding_id) {
            //自动登录
            localStorage.setItem("username",ding_id)
            localStorage.setItem("uid",uid)
            localStorage.setItem("jwt",jwt)
        };

        //微博登录，接收参数
		var sina_id = this.$route.query.sina_id;
		var uid = this.$route.query.uid;
        var jwt = this.$route.query.jwt;

        if (sina_id) {
            //自动登录
            localStorage.setItem("username",sina_id)
            localStorage.setItem("uid",uid)
            localStorage.setItem("jwt",jwt)
        };

        var user_name = localStorage.getItem("username");
		if (this.username == null) {
			this.username = ''
		}else{
			this.username = user_name
		};
    },
    methods: {
        //登出
        loginout(){
			//清空缓存
			localStorage.removeItem("username")
			//刷新页面
			this.username = '';
            this.$router.push('/login');
        },
        changeLangEvent(key) {
            console.log(key);
                if ( key === 'cn' ) {
                    this.$i18n.locale = 'cn';//关键语句
                    // console.log('cn')
                }else if(key === 'en') {
                    this.$i18n.locale = 'en';//关键语句
                    // console.log('en')
                }else if (key == 'fr'){
                    this.$i18n.locale = 'fr';//关键语句
                    // console.log('fr')
                }
        },
    },
}
</script>

<style>


</style>